<template>
<el-row :gutter="24" >
    <el-col :span="12" >
        <el-card shadow="always">
            <div slot="header" class="clearfix">
                <span>根据学生姓名查询</span>
            </div>
            <el-input
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="name"
                    class="inputclass">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>

            <div style="margin-top: 20px">

                <el-table  :data="users"  height="487"  border  style="width: 100%">
                    <el-table-column prop="id"  label="学号"  width="80"></el-table-column>

                    <el-table-column prop="name"  label="姓名"  width="80"></el-table-column>

                    <el-table-column prop="classes"  label="班级"  width="80"></el-table-column>

                    <el-table-column  prop="sex"  label="性别" width="80"></el-table-column>

                    <el-table-column  prop="number"  label="寝室号" width="80"></el-table-column>

                    <el-table-column  prop="state"  label="在寝状态" width="80"></el-table-column>

                </el-table>

                <div>
                    <span class="demonstration"></span>
                    <!--:current-page 默认第一页-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[10, 20, 30]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            page-count="5"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-card>

    </el-col>
    <el-col :span="12" >
        <el-card shadow="always">
            <div slot="header" class="clearfix">
                <span>根据宿舍号查询</span>
            </div>
            <el-select v-model="dong"  @change="changedong" placeholder="请选择" style="width: 33%">
                <el-option
                        v-for="item in dong1"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                >
                </el-option>
            </el-select>

            <el-select v-model="ceng"  @change="changceng" placeholder="请选择" style="width: 33%">
                <el-option
                        v-for="item in ceng1"
                        :key="item.id"
                        :label="item.number"
                        :value="item.id">
                </el-option>
            </el-select>

            <el-select v-model="ss" @change="changss" placeholder="请选择" style="width: 33%">
                <el-option
                        v-for="item in ss1"
                        :key="item.number"
                        :label="item.number"
                        :value="item.number">
                </el-option>
            </el-select>


            <div style="margin-top: 20px">

                <el-table  :data="users1"  height="340"  border  style="width: 100%">

                    <el-table-column prop="id"  label="学号"  width="80"></el-table-column>

                    <el-table-column prop="name"  label="姓名"  width="80"></el-table-column>

                    <el-table-column prop="classes"  label="班级"  width="80"></el-table-column>

                    <el-table-column  prop="sex"  label="性别" width="80"></el-table-column>

                    <el-table-column  prop="number"  label="寝室号" width="80"></el-table-column>

                    <el-table-column  prop="state"  label="在寝状态" width="80"></el-table-column>

                </el-table>
            </div>
        </el-card>





    </el-col>
</el-row>
</template>


<script>
    import Cookies from 'js-cookie'
    import axios from 'axios';
    export default {
        data() {
            return {
                name:'',
                page : 1,
                rows: 10,
                total:'',
                users: new Array(),
                users1: new Array(),
                dong:'',
                ceng:'',
                ss:'',
                dong1:[],
                ceng1:[],
                ss1:[],


            }
        },
        mounted() {
            this.firstLoginnotify();
            this.load();
        },
        methods:{
            firstLoginnotify() {
                const USERNAME = Cookies.get('username') || 'Sakuya'
                if (this.$store.state.app.firstLogin === 'yep') {
                    this.$notify.info({
                        title: `Welcome, ${USERNAME}`,
                        message: 'First login system, You can view eden system documentation',
                        duration: 6000,
                        offset: 60
                    });
                    this.$store.dispatch('setFirstLogin')
                }
            },
            search: function () {
                var name=this.name;
                let url  = "https://www.xuedierhuo.cn/stu/nameTotal?rows="+ this.rows +"&page=" + this.page +"&name=" + this.name;
                //重置data数据
                Object.assign(this.$data, this.$options.data())
                axios({
                    method:'get',
                    headers:{
                        'token': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4',
                    },
                    url:url,
                }).then( (response)=>{
                    this.name=name;
                    console.log(response)
                    var flag =  response.data.data.rows;
                    this.total = response.data.data.total;
                    for (let i = 0; i < flag.length; i++) {
                        let user = flag[i];
                        let data = {
                            "classes": user.classes,
                            "dormId": user.dormId,
                            "dormName": user.dormName,
                            "id": user.id,
                            "lastin": user.lastin,
                            "lastout": user.lastout,
                            "name": user.name,
                            "phone": user.phone,
                            "reason": user.reason,
                            "number":user.dorm.number,
                            "sex" : user.sex === 0 ? "男" : "女",
                            "state" : user.state === 0 ? "不在寝" : "在寝",
                            "towerName": user.towerName,
                            "wxuser": user.wxuser,
                            "wxuserId": user.wxuserId

                        };
                        this.users.push(data)
                    }
                    this.load();

                }).catch(function(error) {
                    alert(error);
                });
            },
            load(){
                let url  = "https://www.xuedierhuo.cn/house";
                axios(url, {
                    method:'get',
                    headers:{
                        'token': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4',
                    },
                    url:url,
                }).then((response)=>{
                    var flag = response.data
                    for (let i = 0; i < flag.length; i++) {
                        let d = flag[i];
                        this.dong1.push(d)
                    }


                }).catch(function(error) {
                    alert(error);
                });
            },
            changedong:function(){

                this.ceng=null;
                this.ceng1=[];
                this.ss=null;
                this.ss1=[];
                this.users1=[];
                let url  = "https://www.xuedierhuo.cn/floor/"+this.dong;
                axios(url, {
                    method:'get',
                    headers:{
                        'token': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4',
                    },
                    url:url,
                }).then((response)=>{
                    var flag = response.data
                    for (let i = 0; i < flag.length; i++) {
                        let c = flag[i];
                        this.ceng1.push(c)
                    }

                }).catch(function(error) {
                    alert(error);
                });
            },
            changceng:function(){
                this.ss=null;
                this.ss1=[];
                let url  = "https://www.xuedierhuo.cn//dorm/num/"+this.ceng;
                axios(url, {
                    method:'get',
                    headers:{
                        'token': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4',
                    },
                    url:url,
                }).then((response)=>{
                    var flag = response.data.data
                    for (let i = 0; i < flag.length; i++) {
                        let s = flag[i];
                        this.ss1.push(s)
                    }

                }).catch(function(error) {
                    alert(error);
                });
            },
            changss:function(){
                this.users1=[];
                let url  = "https://www.xuedierhuo.cn/dorm/door/"+this.ss;
                axios(url, {
                    method:'get',
                    headers:{
                        'token': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4',
                    },
                    url:url,
                }).then((response)=>{
                    console.log(response)
                   var number=response.data.data.number;
                    var flag =  response.data.data.students;
                    for (let i = 0; i < flag.length; i++) {
                        let stu = flag[i];
                        let data = {
                            "name":stu.name,
                            "id":stu.id,
                            "classes":stu.classes,
                            "sex" : stu.sex === 0 ? "男" : "女",
                            "number":number,
                            "state" : stu.state === 0 ? "不在寝" : "在寝",
                        };
                        this.users1.push(data)
                    }
                }).catch(function(error) {
                    alert(error);
                });
            },
            handleSizeChange(val) {
                this.rows = val;
                this.search();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.search();

            }
        }
    }
</script>

<style>
    .inputclass{
        width:35% ;
    }

</style>

